<template>
  <div>
    <el-descriptions :size="size" :column="3" border direction="vertical">
      <el-descriptions-item label="机柜名称" label-align="left" align="center"
        >{{ cabinet.single.cabinetName }}
      </el-descriptions-item>
      <el-descriptions-item label="站点名称" label-align="left" align="center"
        >{{ cabinet.single.siteName }}
      </el-descriptions-item>
      <el-descriptions-item label="机柜编号" label-align="left" align="center"
        >{{ cabinet.single.cabinetCode }}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间" label-align="left" align="center"
        >{{ cabinet.single.createTime }}
      </el-descriptions-item>
      <el-descriptions-item label="机柜类型" label-align="left" align="center">
        <el-tag>{{ getDictionaryValue(cabinet.single.cabinetType) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="机柜型号" label-align="left" align="center"
        >{{ cabinet.single.cabinetModel }}
      </el-descriptions-item>
      <el-descriptions-item label="机柜规格" label-align="left" align="center"
        >{{ cabinet.single.cabinetSpecs }}
      </el-descriptions-item>
      <el-descriptions-item label="机柜尺寸" label-align="left" align="center"
        >{{ cabinet.single.cabinetSize }}
      </el-descriptions-item>

      <el-descriptions-item label="节能率" label-align="left" align="center"
        >{{ cabinet.single.cabinetSize }}
      </el-descriptions-item>
      <el-descriptions-item label="覆盖人数" label-align="left" align="center">
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            覆盖人数
          </div>
        </template>
        {{ cabinet.single.peoplecovered }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, inject, computed } from "vue";

const cabinet = inject("cabinet") as any;

const size = ref("");
const iconStyle = computed(() => {
  const marginMap = {
    large: "8px",
    default: "6px",
    small: "4px",
  };
  return {
    marginRight: marginMap.default,
  };
});

//判断字典值
const getDictionaryValue = (val: any) => {
  return cabinet.tags["cabinetType"][val];
};

onMounted(() => {});
</script>
<style lang="scss" scoped></style>
